<template>
  <div class="container">
    <!-- 工具条 -->
    <el-form :inline="true" :data="tableData" class="demo-form-inline" style="margin-top:40px">
      <div class="search">
        <el-form-item label="字典">
          <el-input v-model="searchValue" placeholder="要查询的字典"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </div>
      <div class="newButton">
        <el-form-item>
          <el-button type="primary" size="small" @click="handleAdd"><svg-icon icon-class="add" style="cursor:pointer"/> 新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 列表 -->
    <el-table v-loading="listLoading" :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}" style="width: 100%" @selection-change="selsChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="50"/>
      <el-table-column prop="name" label="参数名" sortable width="180"/>
      <el-table-column prop="code" label="参数编码" sortable width="180"/>
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="value" label="参数值" />
      <el-table-column prop="memo" label="备注" />
      <el-table-column prop="sort" label="排序" sortable />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col ref="row" :span="24" style="background-color: aliceblue">
      <div style="margin:10px">
        <!-- <el-button :disabled="sels.length===0" type="danger" @click="batchRemove" >批量删除</el-button> -->
        <div class="block" style="float:right;padding:5px 0">
          <el-pagination
            :total="total"
            :current-page.sync="page"
            layout="prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-col>
    <!--新增界面-->
    <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="80px">
        <div style="width:100%; display:inline-flex">
          <el-form-item label="参数名" prop="name" class="inlineWith">
            <el-input v-model="addForm.name" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="参数编码" prop="code" class="inlineWith">
            <el-input v-model="addForm.code" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <!-- <el-form-item label="类型" prop="type" style="width:50%">
            <el-input v-model="addForm.type" auto-complete="off"/>
          </el-form-item> -->
          <el-form-item label="参数类型" prop="type" class="inlineWith">
            <el-select v-model="addForm.type" placeholder="请选择" class="inlineInput">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="参数值" prop="value" class="inlineWith">
            <el-input v-model="addForm.value" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item v-if="addForm.type=='下拉选项'" label="组别" prop="group" class="inlineWith">
            <el-select
              v-model="addForm.group"
              :loading="selectLoading"
              filterable
              allow-create
              placeholder="请选择"
              class="inlineInput"
              @visible-change="select">
              <el-option
                v-for="item in groupOptions"
                :key="item.label"
                :label="item.label"
                :value="item.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort" class="inlineWith">
            <el-input v-model="addForm.sort" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="addForm.memo" type="textarea" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" type="primary" @click.native="addSubmit">提交</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--编辑界面-->
    <el-dialog :visible.sync="editFormVisible" :close-on-click-modal="false" title="编辑">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" label-width="80px">
        <div style="width:100%; display:inline-flex">
          <el-form-item label="参数名" prop="name" class="inlineWith">
            <el-input v-model="editForm.name" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="参数编码" prop="code" class="inlineWith">
            <el-input v-model="editForm.code" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <!-- <el-form-item label="类型" prop="type" style="width:50%">
            <el-input v-model="addForm.type" auto-complete="off"/>
          </el-form-item> -->
          <el-form-item label="参数类型" prop="type" class="inlineWith">
            <el-select v-model="editForm.type" placeholder="请选择" class="inlineInput">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="参数值" prop="value" class="inlineWith">
            <el-input v-model="editForm.value" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item v-if="editForm.type=='下拉选项'" label="组别" prop="group" class="inlineWith">
            <el-select v-model="editForm.group" :loading="selectLoading" placeholder="请选择" class="inlineInput" @visible-change="select">
              <el-option
                v-for="item in groupOptions"
                :key="item.label"
                :label="item.label"
                :value="item.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort" class="inlineWith">
            <el-input v-model="editForm.sort" auto-complete="off" class="inlineInput"/>
          </el-form-item>
        </div>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="editForm.memo" type="textarea" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="editLoading" type="primary" @click.native="editSubmit">提交</el-button>
        <el-button @click.native="editFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictionaryList, add, listGroup, deleteDictionary, updateDictionary, searchDictionary } from '@/api/dictionary'

export default {
  data() {
    return {
      // 表数据
      tableData: [],
      // 选中的列
      sels: [],
      // 搜索的值
      searchValue: '',
      // 总条目数
      total: 1,
      // 当前页
      page: 1,
      count: 10,
      // 添加窗口默认关闭显示
      addFormVisible: false,
      // 编辑界面是否显示
      editFormVisible: false,
      // 添加loading加载
      addLoading: false,
      // 编辑loading加载
      editLoading: false,
      // 拉下加载时
      selectLoading: false,
      listLoading: false,
      addForm: {
        name: '',
        code: '',
        value: '',
        type: '',
        group: '',
        memo: '',
        sort: ''
      },
      editForm: {
        name: '',
        code: '',
        value: '',
        type: '',
        group: '',
        memo: '',
        sort: ''
      },
      options: [
        { label: '文本' },
        { label: '数字' },
        { label: '日期' },
        { label: '下拉选项' }
      ],
      groupOptions: [
        { label: '文本' },
        { label: '数字' },
        { label: '日期' },
        { label: '下拉选项' }
      ],
      // 添加字典的规则
      addFormRules: {
        name: [{ required: true, message: '输入参数名', trigger: 'blur' }],
        code: [{ required: true, message: '输入参数编码', trigger: 'blur' }],
        value: [{ required: true, message: '输入参数值', trigger: 'change' }],
        type: [{ required: true, message: '输入类型', trigger: 'change' }],
        group: [{ required: true, message: '下拉选项所属组', trigger: 'change' }],
        memo: [{ required: true, message: '备注', trigger: 'change' }],
        sort: [{ required: true, message: '排序', trigger: 'change' }]
      },
      // 编辑字典的规则
      editFormRules: {
        name: [{ required: true, message: '输入参数名', trigger: 'blur' }],
        code: [{ required: true, message: '输入参数编码', trigger: 'blur' }],
        value: [{ required: true, message: '输入参数值', trigger: 'change' }],
        type: [{ required: true, message: '输入类型', trigger: 'change' }],
        group: [{ required: true, message: '下拉选项所属组', trigger: 'change' }],
        memo: [{ required: true, message: '备注', trigger: 'change' }],
        sort: [{ required: true, message: '排序', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.getDictionary()
  },
  methods: {
    getDictionary() {
      const para = {
        page: this.page,
        count: 10
      }
      getDictionaryList(para).then(res => {
        this.total = res.data.sums
        this.tableData = res.data.result
      })
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getDictionary()
    },
    addDictionary() {
      add()
    },
    handleAdd() {
      this.addFormVisible = true
    },
    search() {
      searchDictionary(this.searchValue).then(res => {
        this.tableData = res.data
      })
    },
    select(type) {
      if (type) {
        this.selectLoading = true
        listGroup().then(res => {
          this.selectLoading = false
          this.groupOptions = res.data
        })
      }
    },
    handleEdit(index, row) {
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
      console.log(this.editForm)
    },
    handleDel(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        console.log(row)
        deleteDictionary(row.id).then((res) => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getDictionary()
        })
      }).catch(() => {

      })
    },
    // 批量删除
    // batchRemove: function() {
    //   var ids = this.sels.map(item => item.id)
    //   const myData = JSON.stringify({ id: ids })
    //   console.log(myData)
    //   this.$confirm('确认删除选中记录吗？', '提示', {
    //     type: 'warning'
    //   }).then(() => {
    //     this.listLoading = true
    //     batchRemoveRole(ids).then((res) => {
    //       this.listLoading = false
    //       this.$message({
    //         message: '删除成功',
    //         type: 'success'
    //       })
    //       this.getDictionary()
    //     })
    //   }).catch(() => {

    //   })
    // },
    // 保存新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            const para = Object.assign({}, this.addForm)
            console.log(para)
            add(para).then((res) => {
              this.addLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
            }).then(() => {
              this.getDictionary()
            })
          })
        }
      })
    },
    // 提交编辑
    editSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            const para = Object.assign({}, this.editForm)
            if (para.type !== '下拉选项') {
              para.group = ''
            }
            console.log(para)
            updateDictionary(para).then((res) => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getDictionary()
            })
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.inlineWith{
  width: 50%
}
.inlineInput{
  width: 95%
}
.container{
    width: 94%;
    margin-left: 3%;
    height: 100%;
  }
  .search {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    margin-bottom: 30px
  }
  .newButton {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    .el-form-item {
      margin-bottom: 0px
    }
  }
</style>
